const draggable = document.getElementById("draggable");
const info = document.querySelector(".info");
let isDragging = false;
let startX = 0;
let startLeft = 0;

draggable.addEventListener("mousedown", (e) => {
  isDragging = true;
  startX = e.clientX;
  startLeft = draggable.offsetLeft;
});

document.addEventListener("mousemove", (e) => {
  if (isDragging) {
    const dx = e.clientX - startX;
    let newLeft =
      startLeft + dx < 0 ? 0 : startLeft + dx > 300 ? 300 : startLeft + dx;
    draggable.style.left = `${newLeft}px`;
    info.style.left = `${newLeft - 37.5}px`;
    let val = Math.floor((newLeft / 300) * 100);
    info.textContent = val;
  }
});

document.addEventListener("mouseup", () => {
  isDragging = false;
});
